<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    :back="!isShare"
    title="职途顾问"
    :show-top="showTop"
    :dark="loaded ? false : true"
    :hideSafeArea="true"
    :bg-color="dynamicColor"
  >
    <template slot="title">
      <view class="title-container">
        <!-- <span class="return-index" v-if="isShare" @click="handleGotoZhiTuPage">返回首页</span> -->
        <span>职途顾问</span>
      </view>
    </template>
    <view class="buy-page">
      <scroll-view class="container" scroll-y="true" @scroll="myPageScroll">
        <view class="sale-introcution-first"></view>
        <view class="sale-introcution-second"></view>
        <view class="sale-introcution-third"></view>
      </scroll-view>
      <view class="operation">
        <view class="left-button" @click="handleMoreProduct"
          >去体验更多产品</view
        >
        <view class="right-button" @click="showMore">
          <span style="margin-left: 30rpx">立即购买</span>
        </view>
      </view>
      <u-popup
        class="popup-info"
        v-if="showPopup"
        v-model="showPopup"
        :closeable="false"
        mode="bottom"
        border-radius="14"
        width="100%"
        height="70%"
      >
        <view class="title">
          <view>选择服务项</view>
          <view class="close-button" @click="showPopup = false"></view>
        </view>
        <scroll-view scroll-y="true" class="choose-service">
          <view class="shop" v-for="(obj, index) in shopList" :key="index">
            <view class="shop-name" @click="addOrRemoveOneService(obj, index)">
              <view
                class="choose-button"
                v-if="obj.isChoosen == false"
                style="margin-top: 0rpx"
              ></view>
              <view class="choose-sth" style="margin-top: 0rpx" v-else></view>
              {{ obj.groupName }}
              <view class="discounts">特惠</view>
            </view>
            <view class="desc-box" @click="gotoServiceDetail(index)">
              <view class="left-desc">
                <view
                  class="shop-desc"
                  v-for="(desc, index) in obj.ladderUnlockRightJson"
                  :key="index"
                >
                  购买<span>{{ index + 1 }}</span
                  >项服务,{{ index == 0 ? '赠送' : '包含以上服务，加赠'
                  }}{{ desc.services }}{{ index == 0 ? '、' : '' }}</view
                >
              </view>
              <view class="right-arrow"></view>
            </view>
            <view
              v-for="(item, _index) in obj.productList"
              :key="_index"
              class="service-item"
              @click="addOrRemoveOneService(item, index)"
            >
              <view class="choose-button" v-if="item.isChoosen == false"></view>
              <view class="choose-sth" v-else></view>
              <view class="right-card">
                <img class="service-picture" :src="item.productImg" />
                <view class="right-info">
                  <view class="service-name">{{ item.productName }}</view>
                  <text class="service-desc">{{ item.productDesc }}</text>
                  <view class="service-price"
                    ><span style="font-size: 20rpx">￥</span
                    >{{ item.price }}</view
                  >
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="shopping-operation">
          <view class="shopping-cart">
            <view class="chosen"
              >已选<span>{{ chosenNum }}</span
              >个</view
            >
            <view class="price"
              >合计：<span
                ><span style="font-size: 24rpx">￥</span>{{ sumPrice }}</span
              ></view
            >
          </view>
          <view class="right-button" @click="gotoPay">
            <span style="margin-left: 20rpx">立即购买</span>
          </view>
        </view>
      </u-popup>
      <u-popup
        class="service-detail"
        v-if="showServiceDetail"
        v-model="showServiceDetail"
        :closeable="false"
        mode="bottom"
        border-radius="14"
        width="100%"
        height="70%"
      >
        <view class="top">
          <view class="top-left">
            <view class="left-arrow" @click="toShop"></view>
            <view class="title"
              >{{ shopList[currentShopListIndex].groupName }}说明</view
            >
          </view>
          <view class="close-button" @click="showServiceDetail = false"></view>
        </view>
        <scroll-view scroll-y="true" class="more-detail">
          <view class="service">
            <view class="title"
              >{{ shopList[currentShopListIndex].groupName }}项</view
            >
            <view
              v-for="(item, index) in shopList[0].productList"
              class="service-card"
              :key="index"
            >
              <view class="header">
                <view class="name">{{ item.productName }}</view>
                <view class="price"
                  ><span style="font-size: 24rpx">￥</span
                  >{{ item.price }}</view
                >
              </view>
              <view class="footer">{{ item.productDesc }}</view>
            </view>
          </view>
          <view class="complimentary-detail">
            <view class="title">赠送细则</view>
            <view class="complimentary-text">
              <text class="shop-desc">
                针对顾问1对1服务项（简历优化/面试辅导），购买其中<text
                  style="color: #ff711e; margin: 0 10rpx"
                  >1</text
                >项，赠送职业测评、职业报告、AI简历诊断。购买<text
                  style="color: #ff711e; margin: 0 10rpx"
                  >2</text
                >项服务，包含以上赠送内容，加赠AI面评、订阅服务
                <!-- 购买<span>{{ index + 1 }}</span
                >项服务,{{ index == 0 ? "赠送" : "包含以上服务，加赠"
                }}{{ desc.services }} -->
              </text>
            </view>
          </view>
          <view
            class="other-service"
            v-for="(item, index) in serviceList"
            :key="index"
          >
            <view class="title">{{ item.rightName }}</view>
            <!-- <view class="desc" v-for="_item in item.detail">{{ _item }}</view> -->
            <!-- <view class="desc">{{ item.rightRemark }}</view> -->
            <view
              class="desc"
              v-for="(ele, _index) in item.rightRemark.split('|')"
              :key="_index"
              >{{ ele }}</view
            >
          </view>
        </scroll-view>
      </u-popup>
    </view>
    <u-modal
      v-model="showTips"
      :content="tipContent"
      width="70%"
      show-cancel-button
      @confirm="handleConfirmTips"
      @cancel="showTips = false"
    ></u-modal>
    <!-- 这个tarPath是用于新用户通过海报扫码进来营销页面注册完成后跳转到的路径 -->
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import { env } from '@/api/root.js';
import {
  addCartAndToOrder,
  addZhituPayOrder,
  getProductGroup,
  getUserInfo,
  cardRegist,
  getProductGroupLadderInfo,
  addBuryingPoint
} from '@/api/modules/career';
import share from '@/mixins/share';
import LoginDialog from '@/components/LoginDialog';
export default {
  mixins: [share],
  components: { LoginDialog },
  data() {
    return {
      scene: 0,
      etId: 10001, // 10001代表停留 10002代表分享(写在share.js里) 10003代表点击分享链接 10004代表线下扫码 10005代表长按识别
      isBuyPageBuryingPoint: true, // 混入的武汉购买页分享的变量
      // statType: null, // 判断用户埋点类型
      originFrom: '',
      buryingPointId: '',
      cardType: '',
      dynamicTitle: '',
      showTop: false,
      dynamicColor: 'transparent',
      productSign: '', // 项目类型标识
      isShare: true,
      sharePath: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage?${this.shareQuery}`,
      shareTitle: '在找工作吗？职途顾问服务手把手带你掌握求职秘诀！',
      shareQuery: `cardTypeEncrypt=${this.cardKey}&isConsultant=` + 'false',
      consultantId: '',
      currentShopListIndex: 0, // shopList点进去第几项
      navHeight: getApp().globalData.navHeight,
      provider: {},
      mallProductId: '',
      rightProductId: '',
      showPopup: false, // 控制弹出层显示隐藏
      showServiceDetail: false, // 控制服务详情弹出层显示隐藏
      chosenNum: 0, // 已选服务数量
      sumPrice: 0, // 计算得总价
      shopList: [],
      serviceList: [], // 具体赠送服务
      cardKey: '', // 卡类型秘文
      groupName: '', // 当前服务名称
      isConsultant: false,
      showTips: false,
      openPopup: false,
      opt: {},
      targetPath: '', // 经过扫码进来的传过来的需要跳转的目标路径，作为备用
      cardNo: '',
      personId: uni.getStorageSync('person-id').slice(2) || '',
      tipContent: '您已经是职途的用户，是否直接跳转到职途主页？',
      cardVersion: 2,
      experienceMore: false,
      imageUrl: 'https://img3.job1001.com/ypMp/elan/images/tu.jpg',
      ZHI_TU_PAGE: '/pagesSub/userCenter/careerPathV2/index',
      ZHI_TU_PAGE_V1: '/pagesSub/userCenter/careerPath/index',
      WU_HAN_PAGE: '/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage'
    };
  },
  onLoad(opt) {
    console.log('opt-----------------', opt);
    this.imageUrl = 'https://img3.job1001.com/ypMp/elan/images/tu.jpg';
    // 获取从填写姓名和手机号的页面传过来的参数来决定是否自动打开 popup
    this.openPopup = opt.openPopup || false;
    if (this.openPopup) {
      this.getProductGroupFn();
      this.showPopup = true;
      this.chosenNum = 0;
      this.sumPrice = 0;
    }
    // 这个是从ConsultantShare页面传过来获取参数的逻辑
    // 这里是内部聊天分享逻辑
    if (opt.cardType) {
      this.cardKey = opt.cardTypeEncrypt;
      this.cardType = opt.cardType;
      this.consultantId = opt.consultantId;
      this.isConsultant = opt.isConsultant ? true : false;
      this.isShare = opt.isShare ? true : false;
    }
    // 这个是从海报二维码跳转过来获取参数的逻辑
    // 这里无论是链接还是扫码都在下面
    // 此处开始是二维码逻辑
    let paramStr = decodeURIComponent(opt.q).split('?');
    console.log(
      'Array.isArray(paramStr) && paramStr.length > 1',
      Array.isArray(paramStr) && paramStr.length > 1
    );
    if (Array.isArray(paramStr) && paramStr.length > 1) {
      this.targetPath = paramStr[0];
      let str1 = decodeURIComponent(paramStr[1]);
      let str2 = str1.replace(/\\&quot;/g, '"');
      const index = str2.indexOf('&');
      const queryObj = JSON.parse(str2.slice(6, index));
      if (queryObj.t) {
        this.cardKey = queryObj.k || '';
        this.cardType = queryObj.t; // cardType
        this.consultantId = queryObj.d; // consultantId
        this.isShare = queryObj.i; // isShare
        this.isConsultant = false;
      } else {
        this.cardKey = queryObj.cardTypeEncrypt;
        this.cardType = queryObj.cardType;
        this.consultantId = queryObj.consultantId;
        this.isShare = queryObj.isShare;
        this.isConsultant = false;
      }
      //上报顾问海报扫码事件
      wx.reportEvent('consultant_poster_scan', {});
    }
    if (opt.consultantId) {
      // 如果参数里有consultantId说明是顾问分享出来的 就进入10003判断
      console.log('这里是进入到了10003');
      // this.etId = 10003;
      this.originFrom = 'shareLink';
      this.addBuryingPointFn(10003);
      this.cardType = opt.cardType; // 这里带上cardType 项目的cardType是多少这里就是多少
    }

    this.cardType && uni.setStorageSync('cardType', this.cardType);
    //从小程序跳转过来的情况是没有cardType的 所以要在这里加一个,武汉职途的两个环境卡号不一样
    if (!this.cardType || this.cardType == 'undefined') {
      this.isShare = false;
      if (env == 'test') {
        uni.setStorageSync('cardType', 40);
      } else if (env == 'pro') {
        uni.setStorageSync('cardType', 16);
      }
    }
    this.cardKey && uni.setStorageSync('cardKey', this.cardKey);
    this.consultantId && uni.setStorageSync('sellId', this.consultantId);
    this.shareQuery = `cardType=${opt.cardType}&cardTypeEncrypt=${
      this.cardKey
    }&consultantId=${uni.getStorageSync('person-id').slice(2)}`;
    this.sharePath = `${this.WU_HAN_PAGE}?${this.shareQuery}`;
  },
  onShow() {
    // '1011': '扫描二维码',
    // '1012': '长按图片识别二维码',
    // '1013': '扫描手机相册中选取的二维码',
    const launchOptions = uni.getLaunchOptionsSync();
    console.log('场景值:', launchOptions.scene);
    this.scene = launchOptions.scene;
    // 关于埋点接口的执行
    // 这里一共进行两次埋点操作，由后端来执行判断两次埋点的时间间隔来计算页面停留时间
    // 第一次埋点后端返回一个id 第二次埋点把这个id作为参数
    // 由于微信小程序可以切换到后台所以这里逻辑要做两种判断
    // 两种情况我们都要在onShow中进行第一次埋点
    // 1.如果切换到后台，此时进入onHide周期我们进行第二次埋点
    // 2.如果离开这个页面，或者杀死小程序，就进入onUnload周期，我们进行第二次埋点
    this.buryingPointId = '';
    switch (launchOptions.scene) {
      // 根据场景值来区分用户是如何到这个页面的
      case 1011:
        // this.etId = 10004;
        this.addBuryingPointFn(10004);
        break;
      case 1012:
        // this.etId = 10005;
        this.addBuryingPointFn(10005);
        break;
      default:
        // this.etId = 10001;
        // this.addBuryingPointFn(10001);
        break;
    }
    // this.etId = 10006; // 埋点统计访问次数
    this.addBuryingPointFn(10006);

    // this.etId = 10001; // 埋点统计时长
    this.addBuryingPointFn(10001);
  },
  created() {
    //获取支付提供商
    uni.getProvider({
      service: 'payment',
      success: (res) => {
        this.provider = res.provider;
      }
    });
  },
  onHide() {
    console.log('这里进入了onHide周期');
    this.$refs.loginDialog.setVisibility(false);
    this.addBuryingPointFn(10001);
  },
  onUnload() {
    console.log('这里进入了onUnload周期');
    this.addBuryingPointFn(10001);
  },
  methods: {
    async addBuryingPointFn(etId) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : '',
        personId: uni.getStorageSync('person-id').slice(2) || '',
        cardType: this.cardType || uni.getStorageSync('cardType') || 0,
        consultantId: uni.getStorageSync('sellId')
          ? uni.getStorageSync('sellId')
          : '',
        // statType: this.statType ? this.statType : null,
        originType: this.originFrom == 'shareLink' ? 10 : 20
      };
      const res = await addBuryingPoint(params);
      if (res.code == 200) {
        if (res.data.id) {
          if (etId == 10001) this.buryingPointId = res.data.id;
        }
      }
    },
    handleConfirmTips() {
      this.showTips = false;
      if (this.cardVersion == 2) {
        uni.redirectTo({
          url: this.ZHI_TU_PAGE
        });
      } else {
        uni.redirectTo({
          url: this.ZHI_TU_PAGE_V1
        });
      }
    },
    myPageScroll(e) {
      //滚动改变颜色
      this.showTop = e.target.scrollTop >= 60;
      if (this.showTop) {
        this.dynamicColor = '#ffffff';
      } else {
        this.dynamicTitle = '';
        this.dynamicColor = 'transparent';
      }
    },
    handleGotoZhiTuPage() {
      uni.navigateTo({
        url: this.ZHI_TU_PAGE
      });
    },
    loginSuccessBack() {
      // 是否是去体验更多
      if (this.experienceMore) {
        this.getUserInfoFn(this.ZHI_TU_PAGE);
      } else {
        // 判断是不是顾问角色
        if (this.isConsultant) {
          this.getProductGroupFn();
          this.showPopup = true;
          this.chosenNum = 0;
          this.sumPrice = 0;
        } else {
          this.getUserInfoFn(this.WU_HAN_PAGE);
        }
      }
    },
    async getProductGroupLadderInfoFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        id: this.shopList[this.currentShopListIndex].id
      };
      const res = await getProductGroupLadderInfo(params);
      if (res.code == 200) {
        let tempService = [];
        res.data.forEach((item) => {
          item.rightList.forEach((_item) => {
            tempService.push(_item);
          });
        });
        this.serviceList = tempService;
      }
    },
    async cardRegistFn() {
      const params = {
        sellId: +this.consultantId
      };
      if (this.cardKey && this.cardKey != 'undefined') {
        params.cardKey = this.cardKey;
      } else {
        params.cardType = this.cardType;
      }
      if (!params.cardType) {
        if (env == 'test') {
          params.cardType = 54;
        } else if (env == 'pro') {
          params.cardType = 28;
        }
      }
      const res = await cardRegist(params);
      if (res.code != 200) {
        uni.showToast({ icon: 'none', title: res.status_desc, duration: 1500 });
      }
    },
    async getUserInfoFn(targetPath) {
      const params = { uid: '' };
      const res = await getUserInfo(params);
      if (res.code == 200) {
        // cardNoe和cardType是同时存在的
        if (!res.data.cardType) {
          // 说明此时没有绑卡 要自动绑定武汉项目的卡
          await this.cardRegistFn();
        } else {
          if (uni.getStorageSync('cardType') != res.data.cardType) {
            console.log('进入了此次不等于分支');
            this.cardVersion = res.data.cardVersion;
            this.showTips = true;
          } else {
            if (this.experienceMore) {
              this.handleGotoZhiTuPage();
            } else {
              await this.getProductGroupFn();
              this.showPopup = true;
              this.chosenNum = 0;
              this.sumPrice = 0;
            }
          }
        }
      }
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    async getProductGroupFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        id: '1',
        unlockTypeList: [10, 20, 30]
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        this.productSign = res.data[0].productSign;
        if (this.productSign != 'ZHITU_WUHAN_SERVICE') {
          uni.navigateTo({
            url: this.ZHI_TU_PAGE
          });
        }
        this.shopList = res.data;
        this.shopList.forEach((item) => {
          item.isChoosen = false;
          item.productList.forEach((_item) => {
            _item.isChoosen = false;
          });
          item.ladderUnlockRightJson &&
            item.ladderUnlockRightJson.forEach((ele) => {
              ele.services = '';
              ele.rightList.forEach((_ele) => {
                if (ele.services != '') {
                  ele.services = ele.services + ',' + _ele.rightName;
                } else {
                  ele.services = _ele.rightName;
                }
              });
            });
        });
      }
    },
    toShop() {
      this.showServiceDetail = false;
      this.showPopup = true;
    },
    addOneService(item, index) {
      item.isChoosen = true;
      // 判断是一级还是二级
      if (item.productList) {
        item.productList.forEach((element) => {
          // 如果是false才要加钱 否则会重复计算
          if (element.isChoosen == false) {
            this.sumPrice += element.price;
            this.chosenNum += 1;
            element.isChoosen = true;
          }
        });
      } else {
        this.sumPrice += item.price;
        this.chosenNum += 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    cancelOneService(item, index) {
      item.isChoosen = false;

      // 判断是一级还是二级
      if (item.productList) {
        item.productList.forEach((element) => {
          if (element.isChoosen == true) {
            this.sumPrice -= element.price;
            this.chosenNum -= 1;
            element.isChoosen = false;
          }
        });
      } else {
        this.sumPrice -= item.price;
        this.chosenNum -= 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    addOrRemoveOneService(item, index) {
      wx.reportEvent('consultant_buy_choose', {});
      if (item.isChoosen == false) {
        this.addOneService(item, index);
      } else {
        this.cancelOneService(item, index);
      }
    },
    handleMoreProduct() {
      this.experienceMore = true;
      // 如果用户没有登录就跳转到登录页面去
      this.personId = uni.getStorageSync('person-id').slice(2) || '';
      // 先判断是否登录
      if (!this.personId) {
        // 在这个地方，登录成功后会在loginSuccessBack这回调里面请求用户数据
        this.showLoginDialog();
      } else {
        this.getUserInfoFn(this.ZHI_TU_PAGE);
      }
    },
    showMore() {
      this.experienceMore = false;
      // 如果用户没有登录就跳转到登录页面去
      this.personId = uni.getStorageSync('person-id').slice(2) || '';
      // 先判断是否登录
      if (!this.personId) {
        // 在这个地方，登录成功后会在loginSuccessBack这回调里面请求用户数据
        uni.setStorageSync('isZhituUser', true); //职途用户标识（注册的时候传regSource用
        this.showLoginDialog();
        return;
      }
      if (this.isConsultant) {
        this.getProductGroup();
        this.showPopup = true;
        this.choosenNum = 0;
        this.sumPrice = 0;
      } else {
        this.getUserInfoFn(this.WU_HAN_PAGE);
      }
    },
    gotoServiceDetail(index) {
      this.showPopup = false;
      this.showServiceDetail = true;
      this.currentShopListIndex = index;
      this.getProductGroupLadderInfoFn();
    },
    gotoPay() {
      if (this.chosenNum > 0) {
        this.shopList.forEach((item) => {
          item.productList.forEach((_item) => {
            if (_item.isChoosen == true) {
              if (this.mallProductId !== '') {
                this.mallProductId =
                  this.mallProductId + ',' + _item.mallProductId;
              } else {
                this.mallProductId = _item.mallProductId;
              }
              if (this.rightProductId !== '') {
                this.rightProductId = this.rightProductId + ',' + _item.id;
              } else {
                this.rightProductId = _item.id;
              }
            }
          });
        });

        this.addCartAndToOrder();
      } else {
        console.log('没有选择商品');
      }
    },
    //1.生成订单
    async addCartAndToOrder() {
      uni.showLoading({
        title: '生成订单中...',
        mask: true
      });

      wx.reportEvent('submit_consultant_service_order', {});
      const params = {
        orderType: 'ZT_SERVICE',
        mallProductId: this.mallProductId, // 这个等着后端返回
        channelType: 80,
        sourceType: 3,
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        cardType: uni.getStorageSync('cardType'),
        orderCondition: {
          rightProductId: this.rightProductId // 等着后端返回
        }
      };
      const res = await addCartAndToOrder(params);
      if (res.code == 200) {
        console.log('resaddCartAndToOrder');
        this.addZhituPayOrder(res.data);
      } else {
        uni.hideLoading();
        uni.showToast({
          title: res.status_desc || '生成订单失败',
          icon: 'none',
          duration: 2000
        });
      }
    },
    //2.通过订单获取支付信息
    async addZhituPayOrder(data) {
      const params = {
        ...data,
        orderType: 'ZT_SERVICE',
        wayCode: 'WX_LITE',
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        personName: uni.getStorageSync('personName'),
        openid: uni.getStorageSync('openid')
      };
      const res = await addZhituPayOrder(params);
      if (res.code == 200) {
        this.requestPayment(res.data);
      } else {
        uni.hideLoading();
        uni.showToast({
          title: res.status_desc || '获取商品信息失败',
          icon: 'none',
          duration: 2000
        });
      }
    },
    //3.使用支付信息调用支付
    requestPayment(data) {
      uni.hideLoading();
      if (this.provider.indexOf('wxpay') < 0) {
        return;
      }
      this.mallProductId = '';
      this.rightProductId = '';
      const payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          console.log('支付成功');
          uni.setStorageSync('edition-Type', 10);
          uni.setStorageSync('isBuy', 1);
          // this.handlePaySuccess(res);
          uni.navigateTo({
            url:
              `/pagesSub/userCenter/careerPathV2/components/zhituPayFinish?mallOrderId=` +
              data.orderId
          });
        },
        fail: (err) => {
          console.log('支付失败');
          //这个是旧的，不需要了
          // uni.navigateTo({
          //   url:
          //     `/pagesSub/userCenter/careerPathV2/components/PayFinish?isFailed=` +
          //     true,
          // });
          uni.showToast({
            title: '支付失败,请您重新支付',
            icon: 'none',
            duration: 3000
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + 'careerPath/';

@font-face {
  font-family: 'D-DIN-PRO-700-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf');
}

.title-container {
  display: flex;
  flex-direction: row;

  .return-index {
    position: absolute;
    left: 70rpx;
  }
}

.buy-page {
  width: 100%;

  .container {
    height: 90vh;

    .sale-introcution-first {
      height: 3121.5rpx;
      background-image: url($img-base-person + 'CBuyPageBackground0.png');
      background-size: 100%;
    }

    .sale-introcution-second {
      height: 3122rpx;
      background-image: url($img-base-person + 'CBuyPageBackground1.png');
      background-size: 100%;
    }

    .sale-introcution-third {
      height: 3118rpx;
      background-image: url($img-base-person + 'CBuyPageBackground2.png');
      background-size: 100%;
    }
  }

  .operation {
    width: 100%;
    height: 10vh;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 12rpx 24rpx 30rpx 38rpx;
    background-color: #ffffff;

    .left-button {
      flex-basis: 240rpx;
      height: 80rpx;
      border-radius: 200rpx;
      border: 2rpx solid #ff711e;
      margin-right: 16rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #ff711e;
      font-size: 30rpx;
    }

    .right-button {
      flex-grow: 1;
      height: 88rpx;
      background-image: url($img-base + 'careerPath/wuhan-buynow3.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      padding: 24rpx 48rpx 20rpx 48rpx;

      span {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: 800;
        font-size: 32rpx;
      }
    }
  }

  .shopping-operation {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .shopping-cart {
      flex-basis: 360rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;

      .chosen {
        color: #888888;
        font-size: 28rpx;

        span {
          color: #ff711e;
          margin: 0 10rpx;
          font-weight: 800;
        }
      }

      .price {
        color: #222222;
        font-size: 30rpx;

        span {
          color: #ff711e;
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
        }
      }
    }
  }

  .popup-info {
    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    .title {
      font-weight: 800;
      font-size: 36rpx;
      color: #222222;
      padding: 28rpx 32rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .close-button {
        width: 48rpx;
        height: 48rpx;
        padding: 12rpx;
        box-sizing: border-box;
        background-image: url($img-base + 'career/sharepopupCloseBtn.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .choose-service {
      height: 70%;
      border-radius: 16rpx;
      background-color: #ffffff;
      width: calc(100% - 32rpx);
      margin: 0 auto;
      padding: 34rpx 24rpx;
      box-sizing: border-box;
    }

    .shop {
      margin-bottom: 36rpx;

      .shop-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: 800;
        font-size: 36rpx;
        color: #111111;
      }

      .shop-desc {
        /* margin-left: 60rpx; */
        width: 100%;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;

        span {
          color: #ff711e;
          margin: 0 10rpx;
        }
      }

      .desc-box {
        width: calc(100% - 50rpx);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* padding: 0 50rpx; */
        margin-left: 60rpx;
        margin-top: 12rpx;

        .left-desc {
          flex-basis: 90%;
        }

        .right-arrow {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
          background-image: url($img-base + 'career/right-arrow.png?v=1');
          background-size: 100% 100%;
        }
      }

      .service-item {
        display: flex;
        flex-direction: row;
        /* align-items: center; */
        margin-top: 42rpx;
        box-sizing: border-box;

        .service-picture {
          width: 148rpx;
          height: 148rpx;
          border-radius: 16rpx;
        }

        .right-card {
          display: flex;
          flex-direction: row;
          align-items: top;

          .right-info {
            margin-left: 18rpx;
            width: 450rpx;

            .service-name {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 32rpx;
              color: #333333;
              margin-bottom: 12rpx;
            }

            .service-desc {
              white-space: normal;
              font-weight: 400;
              font-size: 28rpx;
              color: #777777;
              /* margin-top: 12rpx; */
              line-height: 40rpx;
            }

            .service-price {
              margin-top: 12rpx;
              color: #ff711e;
              /* font-weight: 800; */
              font-family: 'D-DIN-PRO-700-Bold';
              font-size: 42rpx;
            }
          }
        }
      }

      .choose-button,
      .choose-sth {
        /* width: 40rpx; d*/
        height: 40rpx;
        border-radius: 32rpx;
        border: 2rpx solid #d3d3d3;
        margin-right: 20rpx;
        flex-basis: 40rpx;
        margin-top: 54rpx;
      }

      .choose-sth {
        background-image: url($img-base-person + 'chooseSth.png');
        background-size: 100%;
      }

      .discounts {
        width: 70rpx;
        height: 40rpx;
        border-radius: 6rpx;
        border: 2rpx solid #fb5806;
        font-weight: 400;
        font-size: 24rpx;
        color: #fb5806;
        margin-left: 4rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .shopping-operation {
      background-color: #ffffff;
      height: 10vh;
      position: absolute;
      bottom: 0;
      padding: 18rpx 32rpx 30rpx 30rpx;

      .right-button {
        flex-grow: 1;
        height: 84rpx;
        background-image: url($img-base + 'careerPath/wuhan-buynow3.png');
        background-size: 100% 100%;
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        padding: 24rpx 48rpx 20rpx 48rpx;

        span {
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: 800;
          font-size: 32rpx;
        }
      }
    }
  }

  .service-detail {
    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 34rpx;
      justify-content: space-between;

      .top-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .left-arrow {
        width: 28rpx;
        height: 28rpx;
        color: #000000;
        margin-right: 8rpx;
        background-image: url($img-base + 'career/arrow-left-wuhan.png?v=1');
        background-size: 100% 100%;
      }

      .title {
        font-weight: 800;
        font-size: 36rpx;
        color: #222222;
        padding: 28rpx 32rpx 28rpx 12rpx;
      }

      .close-button {
        width: 48rpx;
        height: 48rpx;
        padding: 12rpx;
        box-sizing: border-box;
        background-image: url($img-base + 'career/sharepopupCloseBtn.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .more-detail {
      height: 90%;
      /* border-radius: 16rpx; */
      background-color: #f4f6f8;
      width: calc(100% - 16rpx);
      margin: 0 auto;
      padding: 12rpx 24rpx 34rpx 24rpx;
      box-sizing: border-box;

      .service {
        border-radius: 16rpx;
        width: 100%;
        background-color: #ffffff;
        padding: 28rpx 24rpx;
      }

      .title {
        font-weight: 800;
        font-size: 36rpx;
        color: #222222;
      }

      .service-card {
        margin-top: 16rpx;
        padding: 28rpx 32rpx;
        background-color: #fff5e8;
        border-radius: 6rpx;

        .header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .name {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 32rpx;
            color: #222222;
          }

          .price {
            font-weight: 800;
            font-size: 44rpx;
            color: #ff5e00;
            font-family: 'D-DIN-PRO-700-Bold';
          }
        }

        .footer {
          font-weight: 400;
          font-size: 28rpx;
          color: #9c8074;
          margin-top: 16rpx;
        }
      }

      .complimentary-detail {
        width: 100%;
        padding: 28rpx 12rpx;

        .complimentary-text {
          color: #666666;
          width: 100%;
          margin-top: 24rpx;

          span {
            white-space: normal;
          }
        }

        .shop-desc {
          /* margin-left: 60rpx; */
          width: 100%;
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;

          span {
            color: #ff711e;
            margin: 0 10rpx;
          }
        }
      }

      .other-service {
        width: 100%;
        padding: 24rpx 32rpx;
        background-color: #eaeced;
        margin-top: 16rpx;
        border-radius: 6rpx;

        .desc {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
